// 普通混合：以下代码会被编译进CSS
//.center {
//  position: absolute;
//  left: 0;
//  right: 0;
//  top: 0;
//  bottom: 0;
//  margin: auto;
//  background: deeppink;
//  height: 100px;
//  width: 100px;
//  &:hover {
//    background: pink;
//  }
//}

// 不带参数的混合：以下代码不会被编译进CSS
//.center() {
//  position: absolute;
//  left: 0;
//  right: 0;
//  top: 0;
//  bottom: 0;
//  margin: auto;
//  background: deeppink;
//  height: 100px;
//  width: 100px;
//  &:hover {
//    background: pink;
//  }
//}

// 带参数的混合：以下代码不会被编译进CSS
.center(@w, @h, @c, @hc) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: @c;
  height: @h;
  width: @w;
  &:hover {
    background: @hc;
  }
}

// 带参数（默认值）的混合：以下代码不会被编译进CSS
.center(@w:50px, @h:50px, @c:deeppink, @hc:pink) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: @c;
  height: @h;
  width: @w;
  &:hover {
    background: @hc;
  }
}

#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;

  .inner {
    .center(100px, 100px, deeppink, yellow);
  }

  .inner2 {
    .center;
  }

  .inner3 {
    // 命名参数
    .center(@c:black);
  }
}